<template>
  <SelectRelationConfig @ok="hanleSelectRelationConfigOK" v-model:show="showSelectRelationConfig" :manualConfigs="manualConfigs" v-model="manualConfig"/>
  <RelationFormList
      :context="context"
      :subFormId="subFormId"
      :rowId="rowId"
      :source-form-id="subFormId"
      :rowIndex="rowIndex"
      :manualConfig="manualConfig"
      v-model:show="showRelationFormList"/>
</template>
<script setup>
import {createProps} from '@/utils';
import {nextTick, shallowRef, watch, ref} from 'vue';
import RelationFormList from '@comp/FormEngine/field/relation/RelationFormList/RelationFormList.vue';
import SelectRelationConfig from '@comp/FormEngine/field/relation/RelationFormListPopup/SelectRelationConfig.vue';

defineOptions({name: 'RelationFormListPopup'})
const props = defineProps({
  show: createProps(Boolean),
  subFormId: createProps(String),
  rowIndex: createProps(Number),
  rowId: createProps(String),
  context: createProps(Object, () => undefined),
  manualConfigs: createProps(Array, () => []),
})
const showSelectRelationConfig = shallowRef(false);
const showRelationFormList = shallowRef(false);
const emits = defineEmits(['update:show']);
const manualConfig = ref();

function opened() {
  if (props.manualConfigs && props.manualConfigs.length == 1) {
    //只有一个
    showRelationFormList.value = true;
    manualConfig.value = props.manualConfigs[0];
  } else {
    //有很多个
    showSelectRelationConfig.value = true
    manualConfig.value = undefined
  }
}

function hanleSelectRelationConfigOK() {
  showRelationFormList.value = true;
}

watch(() => [showSelectRelationConfig.value, showRelationFormList.value], () => {
  if (!showSelectRelationConfig.value && !showRelationFormList.value) {
    emits('update:show', false);
  }
}, {
  immediate: true,
})

watch(() => props.show, () => {
  nextTick(() => {
    if (props.show) {
      opened()
    }
  })
})
</script>
<style scoped lang="less">

</style>